<!-- 控件的使用 -->
<template>
    <div>
        <div style="" ref="map" id="mapDiv"></div>
    </div>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
const map = ref(null);
const menu = ref(null);

// 初始化地图
function initMap() {
    map.value = new T.Map("mapDiv");
    map.value.centerAndZoom(new T.LngLat(116.40769, 39.89945), 12);

    /**
     * 添加标注
     */
    let marker = new T.Marker(new T.LngLat(116.411794, 39.9068)) // 创建标注对象并指定标注所在位置
    // map.value.addOverLay(marker)


    /**
     * 自定义图片
     */
    let icon = new T.Icon({
        iconUrl: "http://api.tianditu.gov.cn/img/map/markerA.png", // 自定义图片
        iconSize: new T.Point(19, 27),                             // 图片宽高
        iconAnchor: new T.Point(10, 25)                            // 图标偏移量
    });
    let markerImg = new T.Marker(
        new T.LngLat(116.411794, 39.9200), // 标注所在位置
        {
            icon: icon,  // 自定义图片配置项
        }
    );
    // map.value.addOverLay(markerImg)


    /**
     * 文字标注
     */
    var label = new T.Label({
        text: "<b>HELLO 天地图</b>", // 标注中的文字内容、支持HTML标签
        position: new T.LngLat(116.412000, 39.9200), // 标注所在的位置
        offset: new T.Point(-9, 0) // 标注位置偏移量
    });
    // map.value.addOverLay(label)


    /**
     * 多边形
     */
    let points = [ // 多边形地理位置
        new T.LngLat(116.41136, 39.97569),
        new T.LngLat(116.411794, 39.9068),
        new T.LngLat(116.32969, 39.92940),
        new T.LngLat(116.385438, 39.90610),
    ]
    // 创建面对象
    var polygon = new T.Polygon(points, {
        color: "#FF8714",          // 多边形边框线颜色
        weight: 3,              // 多边形边框线宽度
        opacity: 0.5,           // 多边形边框线线透明度 ( 0 ~ 1)
        lineStyle: "solid",	    // 多边形边框线样式 (solid 或 dashed)
        fillColor: "#FF8714",   // 多边形填充颜色。当参数为空时，折线覆盖物将没有填充效果。
        fillOpacity: 0.5        // 多边形填充透明度( 0 ~ 1)
    });
    // map.value.addOverLay(polygon)


    /**
     * 添加带洞的多边形
     */
    var points1 = [
        new T.LngLat(116.315000, 39.964750),
        new T.LngLat(116.303330, 39.960810),
        new T.LngLat(116.306760, 39.866270),
        new T.LngLat(116.328740, 39.847560),
        new T.LngLat(116.366500, 39.855730),
        new T.LngLat(116.442380, 39.856520),
        new T.LngLat(116.455080, 39.865480),
        new T.LngLat(116.456110, 39.950020),
        new T.LngLat(116.428990, 39.967390)
    ];


    var points2 = [new T.LngLat(116.349330, 39.941590),
    new T.LngLat(116.350620, 39.900650),
    new T.LngLat(116.353110, 39.898670),
    new T.LngLat(116.413880, 39.899990),
    new T.LngLat(116.418340, 39.903150),
    new T.LngLat(116.429330, 39.903940),
    new T.LngLat(116.427270, 39.947910),
    new T.LngLat(116.365810, 39.946600)
    ];


    var polygon1 = new T.Polygon([points1, points2], { //创建面对象
        color: "black",
        weight: 3,
        opacity: 0.2,
        fillColor: "blue",
        fillOpacity: 0.5
    });
    // map.value.addOverLay(polygon1); // 向地图上添加面


    /**
     * 添加矩形
     */
    var bounds = new T.LngLatBounds(new T.LngLat(116.36231, 39.87784), new T.LngLat(116.43954, 39.92841));
    var rect = new T.Rectangle(bounds, {
        color: "#FF8714",          // 多边形边框线颜色
        weight: 3,                 // 多边形边框线宽度
        opacity: 1,                // 多边形边框线线透明度 ( 0 ~ 1)
        lineStyle: "solid",	       // 多边形边框线样式 (solid 或 dashed)
        fillColor: "#FF8714",      // 多边形填充颜色。当参数为空时，折线覆盖物将没有填充效果。
        fillOpacity: 0.4           // 多边形填充透明度( 0 ~ 1)
    });
    // map.value.addOverLay(rect);


    /**
     * 添加圆形
     */
    var circle = new T.Circle(
        new T.LngLat(116.40093, 39.90313),
        5000, // 
        {
            color: "#FF8714",          // 多边形边框线颜色
            weight: 3,                 // 多边形边框线宽度
            opacity: 1,                // 多边形边框线线透明度 ( 0 ~ 1)
            lineStyle: "solid",	       // 多边形边框线样式 (solid 或 dashed)
            fillColor: "#FF8714",      // 多边形填充颜色。当参数为空时，折线覆盖物将没有填充效果。
            fillOpacity: 0.4           // 多边形填充透明度( 0 ~ 1)
        });
    //向地图上添加圆
    // map.value.addOverLay(circle);


    /**
     * 添加信息窗口
     */
    let infoWin = new T.InfoWindow();       // 创建信息窗口对象
    infoWin.setLngLat(new T.LngLat(116.40969, 39.90940));// 设置信息窗口的地理位置
    infoWin.setContent("添加的信息窗口");    // 添加信息窗口文本
    // map.value.addOverLay(infoWin);          // 添加信息窗口至地图


    /**
     * 编辑线
     */
    let points3 = [
        new T.LngLat(116.41136, 39.97569),
        new T.LngLat(116.411794, 39.9068),
        new T.LngLat(116.32969, 39.92940),
        new T.LngLat(116.385438, 39.90610),
    ]
    const line = new T.Polyline(points3);
    // map.value.addOverLay(line);

}

onMounted(() => {
    initMap()
});

</script>
<style>
#mapDiv {
    width: 800px;
    height: 500px;
    margin: 0 auto;
}
</style>
